<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            left: 500px;
        }

        button {
            position: absolute;
            top: 130px;
        }
    </style>
</head>

<body>
    <div id="box"></div>

</body>
<script src="./js/utils.js"></script>
<script>

    let box = document.getElementById("box")

    function move(ele, obj, callback) {
        let timerLen = 0;
        for (let key in obj) {
            timerLen++;
            let speed;
            clearInterval(ele[key])
            ele[key] = setInterval(function () {
                let style;
                if (key === "opacity") {
                    style = getStyle(ele, key) * 100
                } else {
                    style = parseInt(getStyle(ele, key))
                }
                speed = (obj[key] - style) / 10
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                style = style + speed;

                if (key === "opacity") {
                    ele.style[key] = style / 100;
                } else {
                    ele.style[key] = style + "px";
                }

                if (style === obj[key]) {
                    timerLen--;
                    clearInterval(ele[key])
                    if (timerLen === 0) {
                        callback && callback()
                    }
                }
                
            }, 100)
        }
    }
    move(box, { opacity:0.2 }, function () {
        box.style.background = "yellow"
    });
</script>

</html>